HTML Full Course [Day 15] [Hindi] 💻 | Local Storage APIs🚀 | Mohit Decodes

💾 HTML Tutorial – Part 15: Local Storage APIs

Welcome to Day 15 of the HTML Full Course [Hindi] by Mohit Decodes! Today, we will learn about Local Storage APIs — a powerful way to store data directly in the user’s browser.

🔹 What is Local Storage?

Local Storage is a web storage API that lets you save key-value pairs in the browser with no expiration date. Unlike cookies, it can store more data and does not send data back to the server with every request.

⚙️ Basic Local Storage Methods

  1. localStorage.setItem(key, value) — Save data
  2. localStorage.getItem(key) — Retrieve data
  3. localStorage.removeItem(key) — Remove specific data
  4. localStorage.clear() — Clear all stored data

📌 Example: Using Local Storage

html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Demo</title>
</head>
<body>

<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="saveName()">Save Name</button>
<button onclick="showName()">Show Saved Name</button>
<p id="result"></p>

<script>
function saveName() {
const name = document.getElementById('nameInput').value;
localStorage.setItem('username', name);
alert('Name saved!');
}

function showName() {
const savedName = localStorage.getItem('username');
document.getElementById('result').innerText = savedName ? `Saved Name: ${savedName}` : 'No name found in storage.';
}
</script>

</body>
</html>

💡 Use Cases for Local Storage:

  1. Saving user preferences
  2. Storing form data temporarily
  3. Caching small amounts of data for faster load
  4. Remembering login states (with care)